<template>
  <div class="app-container">
    <el-form :model="queryParams"  size="small" :inline="true" v-show="showSearch" label-width="80px">
      <el-form-item label="公交卡" prop="appcode">
        <el-select v-model="queryParams.appcode" placeholder="请选择公交卡" clearable filterable>
          <el-option
            v-for="dict in dict.type.city_code"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="saas" prop="isSaas">
        <el-select v-model="queryParams.isSaas" placeholder="请选择是否是saas卡" clearable filterable>
          <el-option
            v-for="dict in dict.type.is_saas"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="卡片类型" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择卡片类型" clearable filterable>
          <el-option
            v-for="dict in dict.type.card_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="指令内容" prop="apdu">
        <el-input
          v-model="queryParams.apdu"
          placeholder="请输入要解析的指令"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="parseApdu">解析</el-button>
      </el-form-item>
    </el-form>
    </el-row><br><br>

<div class = "result" >
<span>解析指令：{{apdu}}</span>
<el-divider></el-divider>
<span>指令用途：{{apduDescription}}</span>
<el-divider></el-divider>
<span>真正用途：{{apduRealUse}}</span>
<el-divider></el-divider>
<span v-show = "ps">注意：如果是华为设备的指令，则需要将AMSD转为DMSD</span>
<el-divider></el-divider><br><br>

<span>指令中相关的AID</span><br><br>
<el-table
    :data="aidInfos"
    stripe
    style="width: 100%">
    <el-table-column
      prop="aidName"
      label="Aid名称"
      width="500">
    </el-table-column>
    <el-table-column
      prop="aid"
      label="Aid">
    </el-table-column>
  </el-table>
</div>
  </div>
</template>

<script>

import { parseApduContent } from "@/api/apduParse/apduParsed";

export default {
  name: "Parsed",
  dicts: ['city_code', 'is_saas', 'card_type'],
  data() {
    return {
      // 根路径
      baseURL: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      ps: false,
      // 解析指令
      apdu: null,
      //用途描述
      apduDescription: null,
      //指令中的aid信息
      aidInfos: [],
      //指令的真正用途
      apduRealUse: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 解析参数
      queryParams: {
        type: null,
        isSaas: null,
        apdu: null,
        appcode: null
      },

    };
  },

  methods: {

  parseApdu() {
    this.loading = true;
    this.queryParams.apdu = this.queryParams.apdu.trim();
    parseApduContent(this.queryParams)
  .then(response => {
      console.log(response); // 新增这行代码，打印返回数据查看结构
     this.apdu = response.data.apdu;
     this.apduDescription = response.data.apduDescription;
     this.aidInfos = response.data.aidInfos;
     this.apduRealUse = response.data.apduRealUse;
     this.loading = false;

     this.ps = true;
    })
  .catch(error => {
      console.error('解析APDU数据出错：', error);
     // 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知用户解析失败等
      this.loading = false;
    });
  },


  }
};
</script>
